<template>
  <div class="box">
      <div class="box1">
            <h2>当前求和为:{{$store.state.sum}}</h2>
      <h4>组件描述：{{$store.state.description}}</h4>
      </div> 
      <div class="box2">
          <h4>当前求和放大10倍后：{{$store.getters.bigSum}}</h4>
          <h4>简短的描述：{{$store.getters.shortDescription}}</h4>
          </div>   
      <select v-model.number="n">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
      </select>
      <button @click="increment">+</button>
      <button @click="decrement">-</button>
      <button @click="incrementIfOdd">当前求和为奇数</button> 
      <button @click="incrementWait">等一等0.5秒再加+</button>
      <button @click="incrementServer">请求服务器加多少</button>
  </div>
</template>

<script>
  export default {
      name:'Count',
      data(){
          return{
              n:1
          }
      },
      methods:{
           //加法运算
           //下面的功能是加法，但是没有啥业务逻辑，也就不需要有jia这个action了，可以直接通过commit触发mutations中的JIA
           increment(){
            this.$store.commit('JIA',this.n)
           },
           //减法运算
           //下面的功能是减法，但是没有啥业务逻辑，也就不需要有jian这个action了，可以直接通过commit触发mutations中的JIAN
           decrement(){
                this.$store.commit('JIAN',this.n)
           },
           //奇数加
           incrementIfOdd(){
               this.$store.dispatch('jiaOdd',this.n)
           },
           //等等再加+
           incrementWait(){
               this.$store.dispatch('jiaWait',this.n)
           },
           //发送axios请求服务器加多少
           incrementServer(){
                this.$store.dispatch('jiaServer',this.n)
           }

      },
      mounted() {
          console.log(this)
      },
  }
</script>

<style scoped>
  *{
      margin-left: 10px;
  }
  .box{
      background-color: pink;
      padding: 20px;
  }
  .box1{
      background-color: skyblue;
      padding: 20px;
      margin-bottom: 10px;
  }
  .box2{
      background-color: orange;
      padding: 20px;
  }
</style>